<template>
  <edit-table :dt-option="dtOpts"
              :dt-data="dtData"
              :dt-columns="dtColumns"
              @rowClick="rowClick"

              title="测试数据管理"
              :form-item="formColumns"
              :form-label-width="formLabelWidth"
              @add-data="addData"
              @up-data="updateData"
              @del-data="deleteData"
              msg-type="client_login"
              :rpc-cmd="1"/>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator'
  import i18n from '../modules/i18n'
  import {State, Mutation} from 'vuex-class'

  @Component({
    components: {
      editTable: () => import(/* webpackChunkName: "editTable" */ './tpl/editTable.vue')
    }
  })
  export default class Test extends Vue {
    dtOpts: any = {};
    dtColumns: any[] = [
      {
        title: "name",
        data: 'name'
      },
      {
        title: "age",
        data: 'age'
      }
    ];
    formLabelWidth: string = '80px';
    formColumns: editFormItem[] = [
      {
        label: "name",
        name: "input",
        model: "name",
        rules: [
          {
            required: true,
            message: i18n.t("formRules.required"),
            trigger: 'blur'
          }
        ]
      },
      {
        label: "age",
        name: "input",
        model: "age",
        rules: [
          {
            required: true,
            message: i18n.t("formRules.required"),
            trigger: 'blur'
          }
        ]
      },
      // {
      //   label: "city",
      //   name: "select",
      //   model: "city",
      //   options: [
      //     {
      //       label: "广州",
      //       value: "020"
      //     },
      //     {
      //       label: "深圳",
      //       value: "030"
      //     },
      //     {
      //       label: "北京",
      //       value: "010",
      //       disabled: true
      //     }
      //   ],
      //   placeholder: "请选择",
      //   rules: [
      //     {
      //       required: true,
      //       message: i18n.t("formRules.required"),
      //       trigger: 'change'
      //     }
      //   ],
      //   defauleVal: "020"
      // },
      // {
      //   label: "datetime",
      //   name: "date",
      //   model: "datetime",
      //   placeholder: "选择日期时间",
      //   rules: [
      //     {
      //       required: true,
      //       message: i18n.t("formRules.required"),
      //       trigger: 'change'
      //     }
      //   ]
      // },
      // {
      //   label: "color",
      //   name: "color",
      //   model: "color"
      // },
      // {
      //   label: "checkbox",
      //   name: "checkbox",
      //   model: "checkbox"
      // },
      // {
      //   label: "checkboxGroup",
      //   name: "checkboxGroup",
      //   model: "checkboxGroup",
      //   options: ['上海', '北京', '广州', '深圳'],
      //   modelType: "array"
      // }
    ];

    @State unitData;
    @Mutation setUnitData;
    @Mutation delUnitData;

    get dtData() {
      return this.unitData.table;
    }


    rowClick(data): void {
      console.log("test rowClick", data);
    }

    addData(data): void {
      console.log("test addData", data);
    }

    updateData(data): void {
      console.log("test updateData", data);
    }

    deleteData(data): void {
      console.log("test deleteData", data);
    }

    mounted() {
      window['app'] = this;
      let data = {};
      for (let i = 1; i <= 2000; i++) {
        let key = Math.random().toString(36).substr(2, 10);
        data[key] = {
          id: key,
          name: "test " + i,
          age: i
        }
      }
      this.setUnitData(data);
    }

  }

</script>

<style lang="scss">
</style>
